<template>
    <el-form label-width="auto" :model="operInfo" style="max-width: 600px">
        <el-form-item label="账号">
            <el-input v-model="operInfo.adminname" class="myInput" />
        </el-form-item>
        <el-form-item label="密码">
            <el-input type="password" v-model="operInfo.password" />
        </el-form-item>
        <el-form-item label="角色">
            <el-select v-model="operInfo.role">
                <el-option :value="1" label="超级管理员"></el-option>
                <el-option :value="2" label="轮播图维护人员"></el-option>
                <el-option :value="3" label="商品维护人员"></el-option>
                <el-option :value="4" label="售后人员"></el-option>
            </el-select>
        </el-form-item>
        <div>
            <el-tree ref="treeRef" style="max-width: 600px" :data="data" show-checkbox default-expand-all node-key="id"
                highlight-current :props="defaultProps" />
        </div>
        <el-button type="primary" @click="AddOper">添加</el-button>
        <el-button type="primary" @click="closeAddFn">取消</el-button>
    </el-form>
</template>

<script setup lang="ts">
import type { IOper } from "@/myTypes"
import { reactive, ref } from "vue"
import { addOperApi } from "@/api/oper"
import { ElMessage, ElTree } from 'element-plus'
import data from "./menuData.ts"


const treeRef = ref<InstanceType<typeof ElTree>>();

const operInfo = reactive<IOper>({
    adminname: "",
    password: "",
    role: 1
});
const emit = defineEmits<{
    (e: "closeWin", isReade: boolean): void
}>()

// 取消按钮
const closeAddFn = () => {
    emit("closeWin", false)
}

// 添加操作人员
// addOperApi
const AddOper = () => {
    operInfo.checkedKeys = treeRef.value!.getCheckedKeys(false);
    addOperApi(operInfo).then(res => {
        if (res.data.code == "200") {
            ElMessage.success("添加成功")
            operInfo.adminname = ""
            operInfo.password = ""
            operInfo.role = ""
            emit("closeWin", true)
        }
    })
}
</script>

<style scoped></style>